<template>
  <div class="fol">
    <div class="followMe" v-if="flag === '1' ? true : false">
      <div class="img">
        <img src="@/assets/images/follow.png" alt="" />
      </div>
      <div class="text">暂时还没有人关注你</div>
      <button class="btn folMe" @mousedown="colorDown" @mouseup="colorUp">
        提高我的展示机会
      </button>
    </div>
    <div class="meFollow" v-if="flag === '2' ? true : false">
      <div class="empty" v-if="this.userData.length===0">
        <div class="img">
          <img src="@/assets/images/follow.png" alt="" />
        </div>
        <div class="text">
          你还没有关注过任何人呢<br />关注的越多，脱单的概率才越高
        </div>
        <button class="btn meFol" @mousedown="colorDown" @mouseup="colorUp" @click="$router.push('/search')">
          快去看看有没有你喜欢的人吧
        </button>
      </div>
      <div class="followList" v-else>
        <ul>
          <li
            class="mailLi"
            @mouseleave="mouseleave"
            @mouseenter="mouseenter"
            v-for="(item, index) in infoData"
            :key="index"
          >
            <div class="avatar">
              <img :src="item.avatarURL" alt="" />
            </div>
            <div class="inFo">
              <div class="name">
                <div class="nickName">{{ item.nickname }}</div>
                <span class="span1"></span>
                <span class="span2"></span>
              </div>
              <div class="showContent">{{ item.showContent }}</div>
              <div class="time">13:14</div>
            </div>
            <div class="btns">
              <div class="isFolBtn">
                <button class="iconfont iconHI" @click="hi">打招呼</button>
                <button class="finish">已打招呼</button>
              </div>
              <div class="isFolBtn">
                <button class="iconfont iconxinaixin">已关注</button>
                <button class="cancel" @click="deleteBtn(index)">
                  取消关注
                </button>
              </div>
              <button class="iconfont iconxinxi1">
                发消息
              </button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["flag"],
  name: "NavFollow",
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      userData: (state) => state.search.userData,
    }),
    infoData(){
     return this.userData
    },
    isnum(){
      return this.userData.length
    }
  },
  methods: {
    //点击按钮发生样式变化
    colorDown(e) {
      console.log(e.target);
      e.target.style =
        "background: linear-gradient(-38deg,rgba(133, 109, 241, 0.8), rgba(164, 104, 239, 0.9))";
    },
    colorUp(e) {
      console.log(e.target);
      e.target.style = "background: linear-gradient(-135deg, #856df1, #a468ef)";
    },
    //移入交友信息框
    mouseenter(e) {
      //console.log(index,e.target.localName==="li");
      //console.log(index,e);
      if (e.target.localName === "li") {
        e.target.style = "background:rgb(243,241,254)";
      } else if (e.target.localName === "button") {
        e.target.style = "background:rgb(193,183,248);color:#FFF";
      }
    },
    mouseleave(e) {
      if (e.target.localName === "button") {
        e.target.style = "color: #b098fc";
      }
      e.target.style = "background:#FFF";
    },
    //打招呼
    hi(e) {
      console.log(e.target);
      e.target.style = "display: none";
      e.target.nextElementSibling.style = "display: block;";
    },
    //取消关注
    deleteBtn(index) {
      this.userData.splice(index, 1);
    },
    userArr(userInfo){
       this.userData.push(userInfo)
    },
  },
};
</script>

<style lend="stylus" scoped>
.fol {
  font-size: 14px;
}
.fol .followMe,
.fol .meFollow .empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
/* .fol .meFollow .empty {
  display: none;
} */
.fol .followMe .img,
.fol .meFollow .empty .img {
  width: 142px;
  height: 142px;
  margin: 0 auto;
  margin-top: 84px;
}
.fol .followMe .img img,
.fol .meFollow .empty .img img {
  width: 100%;
  height: 100%;
}
.fol .followMe .text,
.fol .meFollow .text {
  width: 294px;
  margin: 13px auto 60px auto;
  line-height: 21px;
  text-align: center;
  color: #333;
}
.fol .btn {
  width: 185px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  padding: 0 20px;
  margin: 0 auto 297px;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(-135deg, #856df1, #a468ef);
  border: 0;
  outline: none;
}
.fol .meFollow .btn.meFol {
  width: 220px;
  display: block;
}
.fol .meFollow .mailLi {
  /* position: relative; */
  height: 130px;
  padding: 25px 30px 25px 20px;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}
.fol .meFollow .mailLi .avatar {
  width: 80px;
  height: 80px;
  margin-right: 12px;
  cursor: pointer;
  float: left;
}
.fol .meFollow .mailLi .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.fol .meFollow .mailLi .inFo {
  width: 410px;
  margin-right: 8px;
  float: left;
}
.fol .meFollow .mailLi .inFo .name {
  height: 28px;
  padding-top: 4px;
  box-sizing: border-box;
}
.fol .meFollow .mailLi .inFo .name .nickName {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
}
.fol .meFollow .mailLi .inFo .name span {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  background: 0 0 no-repeat;
  background-size: 100% 100%;
}
.fol .meFollow .mailLi .inFo .name .span1 {
  background-image: url(../../assets/images/crown.png);
}
.fol .meFollow .mailLi .inFo .name .span2 {
  background-image: url(../../assets/images/proof.png);
}
.fol .meFollow .mailLi .inFo .showContent {
  line-height: 14px;
  margin: 11px 0;
  color: #666;
}
.fol .meFollow .mailLi .inFo .time {
  color: #ababab;
}
.fol .meFollow .mailLi .btns {
  margin-top: 45px;
  float: right;
}
.fol .meFollow .mailLi .btns button {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  width: 96px;
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  background: #fff;
  padding: 0 15px;
  border: 1px solid #dbdbdb;
  cursor: pointer;
  font-size: 14px;
  color: #b098fc;
  outline: none;
}
.fol .meFollow .mailLi .btns .finish {
  display: none;
  background: #d8d8d8;
}
.fol .meFollow .mailLi .isFolBtn {
  display: inline-block;
}
.fol .meFollow .mailLi .isFolBtn .cancel {
  display: none;
}
.fol .meFollow .mailLi .isFolBtn:hover .iconxinaixin {
  display: none;
}
.fol .meFollow .mailLi .isFolBtn:hover .cancel,
.fol .meFollow .mailLi .isFolBtn:hover .iconHI {
  color: #fff;
  background: rgb(193, 183, 248);
  display: block;
}
.fol .meFollow .mailLi button.iconxinxi1:hover{
  color: #fff;
  background: rgb(193, 183, 248);
}
.fol .meFollow .mailLi .btns button .iconfont {
  font-size: 14px !important;
}
</style>
